<template>
  <el-dialog
    v-model="dialogVisible"
    :title="$t('page.system.user.detail')"
    width="800px"
    :before-close="handleClose"
  >
    <div v-if="userData" class="user-detail">
      <el-descriptions :column="2" border>
        <el-descriptions-item :label="$t('page.system.user.username')">
          {{ userData.username }}
        </el-descriptions-item>
        <el-descriptions-item :label="$t('page.system.user.realName')">
          {{ userData.realName || '-' }}
        </el-descriptions-item>
        <el-descriptions-item :label="$t('page.system.user.nickName')">
          {{ userData.nickName || '-' }}
        </el-descriptions-item>
        <el-descriptions-item :label="$t('page.system.user.gender')">
          <el-tag v-if="userData.gender === 1" type="primary">
            {{ $t('page.system.user.male') }}
          </el-tag>
          <el-tag v-else-if="userData.gender === 0" type="success">
            {{ $t('page.system.user.female') }}
          </el-tag>
          <span v-else>{{ $t('page.system.user.unknown') }}</span>
        </el-descriptions-item>
        <el-descriptions-item :label="$t('page.system.user.phone')">
          {{ userData.phone }}
        </el-descriptions-item>
        <el-descriptions-item :label="$t('page.system.user.phoneVerified')">
          <el-tag :type="userData.phoneVerified === 1 ? 'success' : 'warning'">
            {{ userData.phoneVerified === 1 ? $t('page.system.user.verified') : $t('page.system.user.unverified') }}
          </el-tag>
        </el-descriptions-item>
        <el-descriptions-item :label="$t('page.system.user.status')">
          <el-tag :type="userData.status === 1 ? 'success' : 'danger'">
            {{ userData.status === 1 ? $t('page.system.user.normal') : $t('page.system.user.disabled') }}
          </el-tag>
        </el-descriptions-item>
        <el-descriptions-item :label="$t('page.system.user.role')">
          <el-tag :type="userData.role?.roleKey === 'ADMIN' ? 'danger' : 'primary'">
            {{ userData.role?.name || '-' }}
          </el-tag>
        </el-descriptions-item>
        <el-descriptions-item :label="$t('page.system.user.loginCount')">
          {{ userData.loginCount }}
        </el-descriptions-item>
        <el-descriptions-item :label="$t('page.system.user.lastLoginAt')">
          {{ userData.lastLoginAt || '-' }}
        </el-descriptions-item>
        <el-descriptions-item :label="$t('page.system.user.birthday')">
          {{ userData.birthday || '-' }}
        </el-descriptions-item>
        <el-descriptions-item :label="'验证状态'">
          <el-tag :type="userData.verificationStatus === 1 ? 'success' : 'warning'">
            {{ userData.verificationStatus === 1 ? '已验证' : '未验证' }}
          </el-tag>
        </el-descriptions-item>
      </el-descriptions>

      <!-- 权限列表 -->
      <div v-if="userData.perms && userData.perms.length > 0" class="permissions-section">
        <h4>{{ $t('page.system.user.permissions') }}</h4>
        <el-table :data="userData.perms" border stripe>
          <el-table-column prop="menuName" label="菜单名称" min-width="120" />
          <el-table-column prop="path" label="路径" min-width="120" />
          <el-table-column prop="component" label="组件" min-width="150" />
          <el-table-column prop="perms" label="权限标识" min-width="150" />
          <el-table-column prop="status" label="状态" width="80" align="center">
            <template #default="{ row }">
              <el-tag :type="row.status === '0' ? 'success' : 'danger'">
                {{ row.status === '0' ? '正常' : '停用' }}
              </el-tag>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>

    <template #footer>
      <span class="dialog-footer">
        <el-button @click="handleClose">{{ $t('page.system.user.cancel') }}</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import { computed } from 'vue';
import { ElButton, ElDescriptions, ElDescriptionsItem, ElDialog, ElTable, ElTableColumn, ElTag } from 'element-plus';

import type { UserDetail } from '#/api/system/user';
import { $t } from '#/locales';

interface Props {
  visible: boolean;
  userData?: Partial<UserDetail>;
}

interface Emits {
  (e: 'update:visible', value: boolean): void;
}

const props = defineProps<Props>();
const emit = defineEmits<Emits>();

const dialogVisible = computed({
  get: () => props.visible,
  set: (value) => emit('update:visible', value),
});

const handleClose = () => {
  emit('update:visible', false);
};
</script>

<style scoped>
.user-detail {
  padding: 20px 0;
}

.permissions-section {
  margin-top: 30px;
}

.permissions-section h4 {
  margin-bottom: 15px;
  color: #333;
  font-weight: 500;
}

.dialog-footer {
  display: flex;
  justify-content: flex-end;
}
</style> 
